<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="ct-results-by-builder.html">
<link rel="import" href="ct-embedded-flakiness-dashboard.html">
<link rel="import" href="ct-popout-iframe.html">
<link rel="import" href="ct-commit-list.html">

<polymer-element name="ct-results-panel" attributes="group failureGroupKey tree">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      core-menu > div {
        padding: 5px 10px;
      }

      core-menu > div.core-selected {
        font-weight: bold;
      }

      .message {
        margin: 20px;
        text-align: center;
      }

      ct-popout-iframe {
        height: 100%;
      }

      core-menu {
        box-shadow: 0 3px 3px #ccc;
        flex: none;
        /* Override /deep/ selector in core-menu.css. */
        margin: 0 !important;
        max-height: 20%;
        overflow: auto;
        /* So the box-shadow goes on top of the results. */
        z-index: 1;
      }

      .results {
        flex: 1;
        overflow: auto;
        /* Stay below the box shadow of the core-menu. */
        padding-top: 6px;
      }
    </style>

    <template if="{{ !group.data.url && !group.data.failures.length }}">
      <div class="message">{{ loading ? 'Loading...' : 'No results to display.' }}</div>
    </template>

    <template if="{{ group.data.url }}">
      <ct-popout-iframe src="{{ group.data.url }}"></ct-popout-iframe>
    </template>

    <template if="{{ group.data.failures }}">
      <template if="{{ group.data.failures.length }}">
        <core-menu selected="{{ selected }}">
          <template repeat="{{ failure in group.data.failures }}">
            <template if="{{ failure.testName }}">
              <div>{{ failure.testName }}</div>
            </template>
          </template>
        </core-menu>
      </template>
      <div class="results" layout vertical>
        <template if="{{ group.data.failures[selected].testName }}">
          <ct-embedded-flakiness-dashboard flex layout vertical test="{{ group.data.failures[selected] }}"></ct-embedded-flakiness-dashboard>
        </template>
        <ct-results-by-builder flex layout vertical failure="{{ group.data.failures[selected] }}"></ct-results-by-builder>
        <ct-commit-list commitList="{{ group.data.commitList }}" detailed="true"></ct-commit-list>
      </div>
    </template>

  </template>
  <script>
    Polymer({
      group: null,
      selected: 0,
      loading: true,

      groupChanged: function() {
        if (this.group)
          this.loading = false;
        this.selected = 0;
      },
    });
  </script>
</polymer-element>
